<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>酒店详情</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link href="../mui/css/mui.picker.min.css" rel="stylesheet" />
		<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<style type="text/css">
			ul,
			li {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
			.mui-content {
				margin-bottom: 3.3rem;
				background-color: #fff;
			}
			
			.mui-table-view:after,
			.mui-table-view-cell:after {
				background-color: transparent;
			}
			
			.hotel-header,
			.mui-title,
			.hotel-header .mui-icon {
				color: #e61874;
				background-color: #fff;
			}
			
			.mui-title {
				font-size: 0.9rem;
			}
			
			.comment-top {
				/*display: flex;
				flex-direction: column;
				align-items: center;*/
				font-size: 0;
				text-align: center;
			}
			
			canvas {
				padding: 0.75rem 0 1.5rem
			}
			
			.rate {
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.rate span {
				color: #666;
			}
			
			.rate-num {
				font-size: 1.1rem;
			}
			
			.font12 {
				font-size: 0.6rem;
			}
			
			.appraise-item img {
				width: 4.75rem;
			}
			
			.comment-select {
				display: flex;
				justify-content: space-around;
				height: 2.25rem;
				line-height: 2.25rem;
				margin-bottom: 1.05rem;
			}
			
			.comment-select div {
				position: relative;
				font-size: 0.7rem;
				color: #999;
				text-align: center;
			}
			
			.comment-select div.active {
				color: #e61874;
				/*border-bottom: 2px solid #e61874;*/
			}
			
			.comment-select div.active:after {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
				height: 2px;
				content: '';
				background-color: #e61874;
				border-radius: 2px;
			}
			
			.comment-content li {
				display: flex;
				flex-direction: column;
				padding: 1.5rem 1.2rem 0;
			}
			
			.comment-content li:last-child {
				padding-bottom: 1.5rem;
			}
			
			.title {
				font-size: 0.8rem;
				color: #666;
				padding-bottom: 0.75rem;
			}
			
			.content {
				font-size: 0.7rem;
				color: #999;
				padding-bottom: 1.05rem;
			}
			
			.foot {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 0.5rem;
				color: #ccc;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="javascript:history.back();"></a>
			<h1 class="mui-title">酒店点评</h1>
		</header>
		<div class="mui-content">
			<div class="comment-select">
				<div class="active">好评</div>
				<div>差评</div>
			</div>
			<div class="comment-top">
				<div class="rate">
					<span class="rate-num">90%</span>
					<span class="font12">用户点评</span>
				</div>
				<canvas id="canvas" width="150" height="150"></canvas>
				<!--<div class="appraise">
					<div class="appraise-item">
						<span>好评</span>
						<img src="../styles/images/icon8.png" />
					</div>
					<div class="appraise-item">
						<span>好评</span>
						<img src="../styles/images/icon9.png" />
					</div>
				</div>-->
			</div>
			<div class="comment-content">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<span class="title">标准单人间-（预付）</span>
						<span class="content">房间不错，环境很好，很干净。离地铁很近，很方便，很划算，下次还会再来。</span>
						<div class="foot">
							<span>来自139****4562</span>
							<span>2017-03-22</span>&nbsp;&nbsp;
							<span>15:13:46</span>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<span class="title">标准单人间-（预付）</span>
						<span class="content">房间不错，环境很好，很干净。离地铁很近，很方便，很划算，下次还会再来。</span>
						<div class="foot">
							<span>来自139****4562</span>
							<span>2017-03-22</span>&nbsp;&nbsp;
							<span>15:13:46</span>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<span class="title">标准单人间-（预付）</span>
						<span class="content">房间不错，环境很好，很干净。离地铁很近，很方便，很划算，下次还会再来。</span>
						<div class="foot">
							<span>来自139****4562</span>
							<span>2017-03-22&nbsp;&nbsp;&nbsp;&nbsp;15:13:46</span>
							<span></span>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<span class="title">标准单人间-（预付）</span>
						<span class="content">房间不错，环境很好，很干净。离地铁很近，很方便，很划算，下次还会再来。</span>
						<div class="foot">
							<span>来自139****4562</span>
							<span>2017-03-22</span>&nbsp;&nbsp;
							<span>15:13:46</span>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<span class="title">标准单人间-（预付）</span>
						<span class="content">房间不错，环境很好，很干净。离地铁很近，很方便，很划算，下次还会再来。</span>
						<div class="foot">
							<span>来自139****4562</span>
							<span>2017-03-22</span>&nbsp;&nbsp;
							<span>15:13:46</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script type="text/javascript">
			mui.init();
			window.onload = function() {
				var canvas = document.getElementById('canvas'), //获取canvas元素
					context = canvas.getContext('2d'), //获取画图环境，指明为2d
					centerX = canvas.width / 2, //Canvas中心点x轴坐标
					centerY = canvas.height / 2, //Canvas中心点y轴坐标
					rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
					speed = 0.01; //加载的快慢就靠它了 
				//绘制红色外圈
				function blueCircle(n) {
					context.save();
					context.strokeStyle = "#e61874"; //设置描边样式
					context.lineWidth = 6; //设置线宽
					context.beginPath(); //路径开始
					context.arc(centerX, centerY, 72, -Math.PI / 2, -Math.PI / 2 + n * rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
					context.stroke(); //绘制
					context.closePath(); //路径结束
					context.restore();
				}
				//绘制白色外圈
				function whiteCircle() {
					context.save();
					context.beginPath();
					context.lineWidth = 2;
					context.strokeStyle = "#999";
					context.arc(centerX, centerY, 72, 0, Math.PI * 2, false);
					context.stroke();
					context.closePath();
					context.restore();
				}
				//百分比文字绘制
				function text(n) {
					context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
					context.strokeStyle = "#fff"; //设置描边样式
					context.font = "28px Arial"; //设置字体大小和字体
					//绘制字体，并且指定位置
					context.strokeText(n.toFixed(0) + "%", centerX - 25, centerY + 10);
					context.stroke(); //执行绘制
					context.restore();
				}
				//动画循环
				(function drawFrame() {
					window.requestAnimationFrame(drawFrame, canvas);
					context.clearRect(0, 0, canvas.width, canvas.height);
					whiteCircle();
					text(speed);
					blueCircle(speed);
					if(speed > 100) speed = 0;
					speed += 0.01;
				}());
			}
		</script>
	</body>

</html>